<template>


	<div id="login">
		<h2 class="text-primary">登陆</h2>
		<form method="post" id="login_in" @submit.prevent="sumbitLogin">
			<div class="form-group divSize">
				<label for="username" class="label">用户名</label>


				<input type="text" id="username" placeholder="请输入用户名" v-model="user.username" class="form-control bck" />
			</div>

			<div class="form-group divSize">



				<label for="password" class="label">密码</label>
				<input type="password" id="password" placeholder="请输入密码" v-model="user.password" class="form-control bck" />

			</div>
			<div class="form-group divSize">
				<label class="label">身份</label>
				<label class="radio-inline"><input type="radio"  v-model="user.level" value="0"   />用户</label>
				<label class="radio-inline"><input type="radio" v-model="user.level" value="1"   />版主</label>
				<label class="radio-inline"><input type="radio"  v-model="user.level" value="2"  />管理员</label>
			</div>
 

			<input type="submit" value="确定" class="btn btn-primary" style="margin-top: 30px;" />
		</form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '',
				user: {
					username: '',

					password: '',
					level:0

				},

			}
		},

		methods: {
			sumbitLogin() {


				if (this.user.username != '' || this.user.password != '') {

					this.$http.post("/api/login", this.user, {}).then((data) => {

						if (data.status == 200) {
							if (data.body.length == 0) {

								alert("登陆失败，请检查用户名和密码")
							} else {
								alert("登陆成功")
								this.$store.commit("setStorage", data.body);

								this.$router.replace({
									path: '/queryForum'
								})
							}
						}

					}, (err) => {
						console.log(err)
					})
				} else {
					console.log(333);
				}

			}
		}
	}
</script>

<style scoped>

	#login_in {
		margin: 30px
	}

	.divSize {
		width: 250px;
		margin: 0 auto;
	}



	.label {
		transform: translateX(-999px);
	}

	.bck {
		padding-left: 40px;
		padding-top: 10px
	}

	#username {
		background: url(../../image/icon/username.png) no-repeat;
		background-size: 28px 28px;
		background-position: 2px 5px;
	}

	#password {
		background: url(../../image/icon/password.png) no-repeat;
		background-size: 28px 28px;
		background-position: 2px 5px;
	}
	.radio-inline{
		margin-top: 10px;
		
		margin-right: 16px;
	}

	input:-webkit-autofill,
	textarea:-webkit-autofill,
	select:-webkit-autofill {}
</style>

